require(['./config'],() => {
    require(['url','template','header','fly','footer'],(url,template,header) =>{
        class Detail {
            constructor() {
                this.render().then(() => {
                    this.numgorvTocart()
                }).then(()=>{
                    this.numnextTocart()
                }).then(() => {
                    this.addTocart()
                }).then(()=> {
                    this.minimg()
                }).then(() => {
                    this.size()
                }).then(() => {
                    this.mouseent()
                })              
            }
            render() {
                const id = location.search.slice(4)
                return new Promise((resolve) => {
                $.get(url.getDetail, {id , normal : 1 , sa:null}, resp => {
                    if(resp.code === 200 ) {
                       let {
                            id,
                            title,
                            qunTitle,
                            photo,
                            price,
                            descContentList,
                            commission,
                            saleNum,
                        } = resp.data.detail
                        descContentList = descContentList.filter(item => item.image)
                        const {nickname} = resp.data.shop
                        this.detail = {
                            id,
                            title,
                            qunTitle,
                            photo,
                            price,
                            descContentList,
                            commission,
                            saleNum,
                        }
                        $('#detailtop').html(template('detailtitle',{nickname}))
                        $('#detailhead').html(template('detailTemplate', {...this.detail}))
                        $('#shopinformation').html(template('shopshow', {...this.detail}))
                        resolve()
                    }
                })
            })
            }
            numgorvTocart() {
               $('#ai').on('click', () => {
                let shopnum = Number($('#an').html())
                if(shopnum < 0) shopnum =1
                if(shopnum > 1) shopnum--
                $('#an').html(shopnum)
               })
            }
            numnextTocart () {
                $('#am').on('click', () => {
                let shopnum = Number($('#an').html()) 
                shopnum++
                $('#an').html(shopnum)
                })
            }
            addTocart () {
               $('#add-to-cart').on('click', e => {
                this.fly(e)
                let shopnum =Number($('#an').html())
                let cart =localStorage.getItem('cart') 
                if(cart) {
                    cart = JSON.parse(cart)
                    const isExist = cart.some(shop => shop.id === this.detail.id )
                    if(isExist) {
                        cart = cart.map(shop => {
                            if(shop.id === this.detail.id) shop.count += shopnum
                            return shop
                        })
                    }
                    else {
                        cart.push ({...this.detail, count:shopnum, check : true})
                    }
                    localStorage.setItem('cart',JSON.stringify(cart))
                }else {
                    localStorage.setItem('cart',JSON.stringify([{
                        ...this.detail,
                        count: shopnum,
                        check:true
                    }]))
                }
               })
            }
            fly(e) {
                $(`<img style="width:30px;height:30px;border-radius:50%" src="${this.detail.photo[2].url}">`).fly({
                    start:{
                        left:e.clientX,
                        top:e.clientY
                    },
                    end:{
                        left:$("#shopnumshow").offset().left - $(window).scrollLeft(),
                        top:$('#shopnumshow').offset().top - $(window).scrollTop()
                    },
                    spend:0.1,
                    onEnd: function () {
                        this.destroy ()
                        header.cartnumshop ()
                    }
                })
            }
            minimg () {
                $('.span-s').first().addClass('ac')
                $('.span-s').on('click', function () {
                     $(this).addClass('ac').siblings().removeClass('ac')
                     let path = $(this)[0].src
                     $("#a-img").attr('src',path)
                     $("#a-bigimg").attr('src',path)
                    
              })
            }
            size() {
                $('.span-xl').first().addClass('bord')
                $('.span-xl').on('click',function () {
                    $(this).addClass('bord').siblings().removeClass('bord')

                })
            }
            mouseent() {
                $('#amin').mouseenter(function () {
                    $('#bigimg-span').attr('style','display:block;')
                    $('#zoom').attr('style','display:block;');
                }) 
                $('#amin').mouseleave(function () {
                    $('#bigimg-span').attr('style','display:none;')
                    $('#zoom').attr('style','display:none;');
                }) 
                $('#amin').mousemove( function (e) {
                    let left = e.pageX - $('#amin').offset().left - $('#bigimg-span').innerWidth() / 2
                    let top = e.pageY - $('#amin').offset().top - $('#bigimg-span').innerHeight() / 2
                    if(left < 0) left = 0
                    if(top < 0) top = 0
                    if(left > $('#amin').width() - $('#bigimg-span').innerWidth()) {
                        left = $('#amin').width() - $('#bigimg-span').innerWidth()
                    }
                    if( top > $('#amin').height() - $('#bigimg-span').innerHeight()) {
                        top = $('#amin').height() - $('#bigimg-span').innerHeight()
                    }
                    $('#bigimg-span').css({left : left + 'px', top: top + 'px'})
                    $('#a-bigimg').css({left:  -2 * left + 'px', top: -2 * top + 'px'})

                })
                
            }
         }
        new Detail()
    })
})